import { defineComponent, onBeforeMount, reactive } from "vue";
import { getDomTree } from '@/api/editorPreview';
import Table from "@/components/table.vue";
import textView from "@/components/text-view";
import { isType, isInclude } from "@/utils"
export default defineComponent({
  components: { Table, textView },
  setup () {
    const state = reactive({
      domTree: []
    })
    onBeforeMount(() => {
      getDomTree().then(({ code, data }) => {
        if (code == 200) {
          if (isInclude(data, "content") && isType.isArray(data.content) && data.content.length) {
            state.domTree = data.content.map(item => {
              if (item.type == 'table') {
                if (isType.isArray(item.content) && item.content.length) {
                  item.tableHeader = []
                  item.tableData = []
                  item.content.forEach((row, index) => {
                    if (row.type == 'row' && isType.isArray(row.content) && row.content.length) {
                      let obj = Object.create(null);
                      row.content.forEach((cell, cur) => {
                        if (cell.type == 'cell' && isType.isArray(cell.content) && cell.content.length) {
                          obj[cell.content[0]['prop']] = cell.content[0]['text'];
                          if (cur == row.content.length - 1) {
                            item.tableData.push(obj);
                          }
                          if (index == item.content.length - 1) {
                            cell.content.forEach(p => {
                              item.tableHeader.push({
                                prop: p.prop,
                                label: p.label,
                                props: p.props ? p.props || {} : {},
                                styles: p.styles ? p.styles || {} : {},
                              })
                            })
                          }
                        }
                      })
                    }
                  })

                }
              }
              return item
            })
          }
        }
      })
    })
    return () => {
      let content = [];
      state.domTree.forEach(dom => {
        if (dom.type == 'table') {
          if (isInclude(dom, 'content') && isType.isArray(dom.content) && dom.content.length) {
            content.push(<Table tableObj={dom}></Table>)
          }
        }
        if (dom.type == 'paragraph') {
          if (isInclude(dom, 'content') && isType.isArray(dom.content) && dom.content.length) {
            dom.content.forEach(paragraph => {
              content.push(<textView textObj={paragraph}></textView>)
            })
          }
        }
        if (dom.type == 'text') {
          if (isInclude(dom, 'content') && isType.isArray(dom.content) && dom.content.length) {
            dom.content.forEach(text => {
              content.push(<textView textObj={text}></textView>)
            })
          }
        }
      })
      return (<div className="g-container">
        {content}
      </div>)
    }
  }
})